@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
    :root {
        --color-primary: 76, 110, 245;
        --color-secondary: 144, 147, 153;
        --color-success: 16, 185, 129;
        --color-warning: 245, 158, 11;
        --color-danger: 239, 68, 68;
        --color-info: 96, 165, 250;
    }

    .dark {
        --color-primary: 66, 99, 235;
    }

    html {
        @apply text-secondary-700;
        font-family: 'Inter', system-ui, sans-serif;
    }

    body {
        @apply bg-gray-50 dark:bg-secondary-800 dark:text-secondary-100;
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        @apply font-medium text-secondary-800 dark:text-white;
    }
}

@layer components {
    .btn {
        @apply inline-flex items-center justify-center px-4 py-2 rounded-md font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2;
    }

    .btn-primary {
        @apply btn bg-primary-600 text-white hover:bg-primary-700 focus:ring-primary-500;
    }

    .btn-secondary {
        @apply btn bg-secondary-100 text-secondary-700 hover:bg-secondary-200 focus:ring-secondary-400;
    }

    .btn-success {
        @apply btn bg-success-600 text-white hover:bg-success-700 focus:ring-success-500;
    }

    .btn-danger {
        @apply btn bg-danger-600 text-white hover:bg-danger-700 focus:ring-danger-500;
    }

    .card {
        @apply bg-white dark:bg-secondary-700 rounded-lg shadow-card overflow-hidden transition-shadow hover:shadow-card-hover;
    }

    .form-input {
        @apply block w-full rounded-md border-secondary-300 shadow-sm focus:border-primary-500 focus:ring-primary-500 dark:bg-secondary-800 dark:border-secondary-600 dark:text-white;
    }

    .form-label {
        @apply block text-sm font-medium text-secondary-700 dark:text-secondary-200 mb-1;
    }

    .form-group {
        @apply mb-4;
    }

    .badge {
        @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium;
    }

    .badge-primary {
        @apply badge bg-primary-100 text-primary-800 dark:bg-primary-900 dark:text-primary-200;
    }

    .badge-secondary {
        @apply badge bg-secondary-100 text-secondary-800 dark:bg-secondary-700 dark:text-secondary-200;
    }

    .badge-success {
        @apply badge bg-success-100 text-success-800 dark:bg-success-900 dark:text-success-200;
    }

    .badge-warning {
        @apply badge bg-warning-100 text-warning-800 dark:bg-warning-900 dark:text-warning-200;
    }

    .badge-danger {
        @apply badge bg-danger-100 text-danger-800 dark:bg-danger-900 dark:text-danger-200;
    }
}